<template>
    
    <nav class="navbar bg-primary" data-bs-theme="dark">
  <!-- Navbar content -->
  
    <router-link class="navbar-brand " to="/">者也专栏</router-link>
 
  <ul v-if="!user.isLogin" class="list-inline mb-0">
    
    <li class="list-inline-item"><router-link to="/login" class="btn btn-outline-light my-2">登录</router-link></li>
    <li class="list-inline-item"><router-link to="/signup" class="btn btn-outline-light my-2">注册</router-link></li>
  </ul>
  <ul v-else class="list-inline mb-0">
    <li class="list-inline-item">
        <dropdowns :title="`你好 ${user.nickName}`">
          <dropdown-item><router-link to="/createPost" class="dropdown-item">新建文章</router-link></dropdown-item>
          <dropdown-item><router-link :to="`/column/${user.column}`" class="dropdown-item">我的专栏</router-link></dropdown-item>
            <dropdown-item><router-link :to="`/edit/${user._id}`" class="dropdown-item">编辑资料</router-link></dropdown-item>
            <dropdown-item><a href="#" class="dropdown-item" @click="logout">退出登录</a></dropdown-item>
        </dropdowns>
</li>
     
  </ul>
</nav>
 

</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import Dropdowns from './Dropdowns.vue';
import DropdownItem from './DropdownItem.vue';
import store from '@/store';
import { UserProps } from '@/store';
import router from '@/router';

export default defineComponent({
    name: 'GlobalHeader',
    props: {
        user:{
            type:Object as PropType<UserProps>,
            required: true
        }
    },
    components:{
        Dropdowns,
        DropdownItem
    },

    setup(props, ctx) {
        const logout = ()=>{
          store.commit('logout')
          router.push('/')

        }
        return {
          logout
        }
    },
  }
 

)
</script>
<style>
.navbar-brand{
  margin: 0 10px ;
    font-size: 24px;
    font-weight: bold;
} 
    .list-inline-item {
        margin: 0 10px;
    }
</style>